<template>
    <div>
        <Card :stus="stus"></Card>
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer v-model="show" size="500" title="新增成绩" :with-header="true">
            <Add @addStu="add"></Add>
        </el-drawer>

    </div>
</template>
<script>
import { ref } from 'vue'
import Card from './components/Card.vue'
import Add from './components/Add.vue'
export default {
    name: 'Report',
    components: {
        Card,
        Add
    },
    setup() {
        const stus = ref([
            { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }, avatar: require('@/assets/images/avatar' + Math.floor(Math.random() * 10) + '.png'), },
            { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }, avatar: require('@/assets/images/avatar' + Math.floor(Math.random() * 10) + '.png'), },
            { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 }, avatar: require('@/assets/images/avatar' + Math.floor(Math.random() * 10) + '.png'), },

        ]);
        const show = ref(false);
        const openDrawer = function () {
            show.value = true;
        };
        const add = function (stu) {
            stus.value.push(stu);
            show.value = false;
        }
        return {
            stus,
            show,
            openDrawer,
            add
        }
    }
}
</script>
<style scoped>
.addBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 80px;
}

.icon {
    height: 25px;
}
</style>